<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="文件名称" prop="name">
				<el-input v-model="queryParams.name" placeholder="请输入文件名称" clearable @keyup.enter.native="handleQuery"/>
			</el-form-item>
			<el-form-item label="创建时间" prop="dateRange">
			<el-date-picker
				v-model="queryParams.dateRange"
				type="datetimerange"
				range-separator="-"
				start-placeholder="开始日期"
				value-format="yyyy-MM-dd HH:mm:ss"
				:default-time="['00:00:00','23:59:59']"
				end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<TableCard>
			<el-row :gutter="10" class="mb8">
				<el-col :span="1.5">
					<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['oa:trainDocument:add']">新增</el-button>
				</el-col>
				<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
			</el-row>

			<el-table  :border="Global.tableShowBorder" v-loading="loading" :data="list">
				<el-table-column label="文件名称" align="center" prop="name" />
				<el-table-column label="文件编码" align="center" prop="code" />
				<el-table-column label="创建时间" align="center" prop="createTime" />
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
					<template slot-scope="{row}">
						<el-button size="mini" type="text" icon="el-icon-view" @click="handleUpdate(row,1)" v-hasPermi="['oa:trainDocument:query']">查看</el-button>
						<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(row,2)" v-hasPermi="['oa:trainDocument:edit']">修改</el-button>
						<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)" v-hasPermi="['oa:trainDocument:remove']">删除</el-button>
						<el-button size="mini" type="text" icon="el-icon-setting" @click="handleSet(row,)" v-hasPermi="['oa:trainDocument:edit']">设置水印</el-button>
					</template>
				</el-table-column>
			</el-table>

			<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
		</TableCard>

		<!-- 添加或修改对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="120px" id="screen">
				<div v-if="title == '设置水印'">
					<el-form-item label="水印名称" prop="wmName" >
						<el-input v-model="form.wmName" placeholder="请输入水印名称" />
					</el-form-item>
					<el-form-item label="水印颜色" prop="wmColor" >
						<el-color-picker v-model="form.wmColor" show-alpha></el-color-picker>
					</el-form-item>
					<el-form-item label="水印字体大小" prop="wmFontSize" >
						<el-input-number v-model="form.wmFontSize" :step="1" :min="12" step-strictly></el-input-number>
					</el-form-item>
					<el-form-item label="水印左右间距" prop="wmWidth" >
						<el-input-number v-model="form.wmWidth" :step="1" :min="200" step-strictly></el-input-number>
					</el-form-item>
					<el-form-item label="水印上下间距" prop="wmHeight" >
						<el-input-number v-model="form.wmHeight" :step="1" :min="200" step-strictly></el-input-number>
					</el-form-item>
				</div>
				<el-form-item label="文件名称" prop="name" v-else>
					<el-input v-model="form.name" placeholder="请输入文件名称" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="open = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { listDocs, getDocs, addDocs, updateDocs, delDocs } from "@/api/oa/trainDocument";
export default {
	name: "TrainDocument",
	dicts: ['sys_normal_disable'],
	data() {
		return {
			// 遮罩层
			loading: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 表格数据
			list: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 20,
				name: null,
				dateRange:[],
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				name: [{required: true, message: "文件名称不能为空", trigger: "blur"}],
			},
			fullscreen: false,
		};
	},
	created() {
		this.getList();
	},
	methods: {
		/** 查询套红模版列表 */
		getList() {
			this.loading = true;
			let queryParams = {...this.queryParams}
			let dateRange = queryParams.dateRange || []
			if(dateRange.length){
				queryParams.startTime = dateRange[0]
				queryParams.endTime = dateRange[1]
			}
			delete queryParams.dateRange
			listDocs(queryParams).then(response => {
				this.list = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				name: null,
				tpl: null,
				createTime: null,
				status: "0"
			};
			this.resetForm("form");
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.handleQuery();
		},
		async handleSet(row){//设置水印
			this.reset();
			this.open = true;
			this.title = "设置水印";
			let res = await getDocs(row.id)
			let data = res.data || {}
			this.form = {
				...data,
			}
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = "添加培训文件";
		},
		/** 修改按钮操作 */
		handleUpdate(row,type) {
			this.$router.push({
				path:'/officeDoc/trainDocumentDetail',
				query:{id:row.id,type}
			})
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					if(this.title == '设置水印'){
						updateDocs(this.form).then(response => {
							this.$modal.msgSuccess("操作成功");
							this.open = false;
							this.getList();
						});
					}else{
						addDocs(this.form).then(response => {
							this.$modal.msgSuccess("新增成功");
							this.open = false;
							this.getList();
						});
					}
					
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id || this.ids;
			this.$modal.confirm('是否确认删除该数据项？').then(function() {
				return delDocs(ids);
			}).then(() => {
				this.getList();
				this.$modal.msgSuccess("删除成功");
			}).catch(() => {});
		},
	}
};
</script>
